import styled from 'styled-components'

export const ScrollWrapper = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  .scroll-wrapper {
    position: absolute;
  }
  .scroll-box {
    position: absolute;
    &.hide {
      display: none;
    }
    .scroll-move {
      border-radius: 5px;
      position: absolute;
    }
  }
  &.Yscroll {
    .scroll-wrapper {
      width: 100%;
    }
    .scroll-box {
      height: 100%;
      right: 0;
      top: 0;
      .scroll-move {
        width: 100%;
      }
    }
  }
  &.Xscroll {
    .scroll-wrapper {
      height: 100%;
    }
    .scroll-box {
      width: 100%;
      left: 0;
      bottom: 0;
      .scroll-move {
        height: 100%;
      }
    }
  }
`
